import React, { useState, useEffect } from "react";
import { NavBar } from 'antd-mobile'
import { useNavigate } from "react-router-dom"
import {  QRCode } from 'antd';
import "../css/zth_zsyqm.css"
import img6 from "../image/user6.jpg"

const Zyh_zsyqm = () => {
    const router = useNavigate()
    const back = () => {
        router("/layouts/user")
    }
    const [data, setdata] = useState({
        name: "张三",
        yqm: "123456789"
    })
    const [text, setText] = React.useState('https://ant.design/')
    return (
        <div className="zth_zsyqm">
            <NavBar onBack={back} style={{ color: "white" }}>专属邀请码</NavBar>
            <div className="zth_zsyqm_content">
                <div className="zth_zsyqm_box">
                    <div className="zth_zsyqm_box1">
                        <p>
                            <img src={img6} alt="" style={{ width: "100px", height: "100px",borderRadius:"50%"}} />
                        </p>
                        <h2 style={{marginBottom:"2vh"}}>{data.name}</h2>
                        <p>邀请你</p>
                    </div>
                    <div className="zth_zsyqm_box2">
                        <h2>扫码加入</h2>
                        <h2>记录生活中的美好</h2>
                    </div>
                    <div className="zth_zsyqm_box3">
                        <p>邀请码</p>
                        <p style={{lineHeight:"5vh"}}>{data.yqm}</p>
                        <p>
                            <QRCode value={text || '-'} style={{backgroundColor:"white"}} />
                        </p>
                    </div>
                </div>
                <div className="zth_zsyqm_box4">
                    保存相册
                </div>
            </div>
        </div>
    )
}
export default Zyh_zsyqm